{extend name="base" /}
{block name="body"}
<header class="hui-header">
    <div id="hui-back"></div>
    <div id="hui-header-sreach">
        <div id="hui-header-sreach-icon"></div>
        <form><input type="search" id="searchKey" onkeydown="if(event.keyCode==13)return false;" placeholder="请输入商品关键字" /></form>
    </div>
    <div class="hui-header-sreach-txt" onclick="clearSearch();">清空</div>
</header>
<div class="hui-wrap">
    <div class="hui-hot-sreach">
        <div class="hui-hot-sreach-title">热搜</div>
        <div class="hui-hot-sreach-keys">
            <a href="javascript:hotSearch('笔记本电脑');">笔记本电脑</a>
            <a href="javascript:hotSearch('手机');">手机</a>
            <a href="javascript:hotSearch('小米');">小米</a>
            <a href="javascript:hotSearch('免费');">免费</a>
            <a href="javascript:hotSearch('cpu');">cpu</a>
            <a href="javascript:hotSearch('特价');">特价</a>
            <a href="javascript:hotSearch('台式电脑');">台式电脑</a>
            <a href="javascript:hotSearch('摄像头');">摄像头</a>
        </div>
        <div class="hui-hot-sreach-title">历史</div>
        <div class="hui-hot-sreach-keys">
            <a href="javascript:hotSearch('笔记本电脑');">笔记本电脑</a>
            <a href="javascript:hotSearch('手机');">手机</a>
            <a href="javascript:hotSearch('小米');">小米</a>
            <a href="javascript:hotSearch('免费');">免费</a>
            <a href="javascript:hotSearch('cpu');">cpu</a>
            <a href="javascript:hotSearch('特价');">特价</a>
            <a href="javascript:hotSearch('台式电脑');">台式电脑</a>
            <a href="javascript:hotSearch('摄像头');">摄像头</a>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    //监听搜索事件
    document.getElementById('searchKey').addEventListener('keyup', function(e){if(e.keyCode == 13){searchNow();}});
    function hotSearch(k){
        hui('#searchKey').val(k);
        searchNow();
    }
    //核心搜索函数
    function searchNow(){
        document.activeElement.blur();
        var kwd = hui('#searchKey').val();
        kwd = kwd.trim();
        if(kwd.length < 2){
            hui.toast('关键字至少2个字符');
            hui('.hui-hot-sreach').show();
            return;
        }
        //关闭热搜
        hui('.hui-hot-sreach').hide();
        hui.toast('搜索 '+ kwd);
    }
    //清空
    function clearSearch(){
        hui('#searchKey').val('');
        hui('.hui-hot-sreach').show();
    }
</script>
{/block}